<template>
    <view class="address-base-info">
        <view class="base-item">
            <text>收货人姓名：</text>
            <input class="uni-input" placeholder-style="color: #999;" placeholder="请输入收货人姓名" @blur="blurHandle(baseInfo.memberContactName,'memberContactName')" v-model="baseInfo.memberContactName"/>
        </view>
        <view class="base-item">
            <text>手机号码：</text>
            <input class="uni-input" placeholder-style="color: #999;" placeholder="请输入手机号码" @blur="blurHandle(baseInfo.memberContactPhone,'memberContactPhone')"  v-model="baseInfo.memberContactPhone"/>
        </view>
        <view class="base-item">
            <text>选择省市：</text>
            <view @tap="changeAddress">
                <text :class="[!baseInfo.address ? 'isDefault' : '']">{{baseInfo.address || '点击选择省/直辖市'}}</text>
                <text class="icon-arrow-right icon-btn"/>
            </view>
        </view>
        <view class="base-item">
            <text>街道地址：</text>
            <input class="uni-input" placeholder-style="color: #999;" placeholder="请输入详细的街道地址" @blur="blurHandle(baseInfo.memberContactDetail,'memberContactDetail')"  v-model="baseInfo.memberContactDetail"/>
        </view>
        <view class="base-item" @tap="settingDefault">
            <view style="display: flex; align-items: center;">
                <image class="common-choose common-check-btn"  :src="http+(isDefault?'choose-active':'choose')+'.png'"/>
                <text>设为默认地址</text>
            </view>
        </view>
        <w-picker
                ref="picker"
                :defaultVal="defaultVal"
                mode="region"
                @confirm="onConfirm"/>
        <view class="fix common-save-btn">
            <text class="common-txt" @tap="saveAddress">保存并使用</text>
        </view>
    </view>
</template>

<script>
    import wPicker from '@/components/w-picker/w-picker.vue';
    import service from "@/service";
    export default {
        name: "addAddress",
        components: {
            wPicker
        },
        props: {
            item: {
                default: ()=>{},
                type: Object
            }
        },
        data(){
            return{
                phoneReg: /^1[3456789]\d{9}$/,
                http: this.$https,
                baseInfo: {
                    memberContactName: '',
                    memberContactPhone: '',
                    address: '',
                    memberContactDetail: '',
                    cityArr: [] //设置默认地区
                },
                isDefault: false,
                defaultVal: [0,0,1],
                isRight: true,
                emptyTips: {
                    memberContactName: '姓名',
                    memberContactPhone: '手机号',
                    address: '地区',
                    memberContactDetail: '详细地址',
                }
            }
        },
        methods: {
            changeAddress() {
                this.$refs.picker.show();
            },
            // 保存地址
            saveAddress() {
                let {memberContactName, memberContactDetail, memberContactPhone, cityArr, memberContactId} = this.baseInfo;
                if(!this.isRight){
                    uni.showModal({
                        title: '温馨提示',
                        content: '请输入正确格式的手机号',
                        showCancel: false
                    });
                    return;
                }
                if (memberContactDetail.length < 5) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '详细地址不少于5个字哦',
                        showCancel: false
                    });
                    return;
                }
                if(memberContactName && memberContactDetail && memberContactPhone && cityArr.length){
                    let params = {
                        memberContactName,
                        memberContactDetail,
                        cityArr,
                        memberContactDefault: this.isDefault ? 1 : 0,
                        memberContactPhone
                    };
                    memberContactId ? params.memberContactId = memberContactId : null
                    this.serviceFun(params, 'save', memberContactId ? 'PUT' : 'POST')
                } else {
                    uni.showModal({
                        title: '温馨提示',
                        content: '请填写必填项哦！',
                        showCancel: false
                    });
                }

            },
            serviceFun(params, type, methods){
                uni.showLoading({
                    title: '加载中',
                });
                service.mineService.contactsAddress({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            type === 'save' ? this.saveHandle() : this.getDetail(res);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                    method: methods
                });
            },
            saveHandle(){
                uni.showToast({
                    title: `添加成功`,
                    duration: 2500,
                    icon: 'none'
                });
                uni.navigateBack(-1);
            },
            getDetail(res){
                this.baseInfo = {...this.baseInfo, ...res.result};
                this.baseInfo.address = res.result.cityArrName.join(',');
                this.isDefault = !!this.baseInfo.memberContactDefault;
            },
            blurHandle (str, type) {
                // 判断是否为空
                if (!str) {
                    uni.showModal({
                        title: '温馨提示',
                        content: `${this.emptyTips[type]}不能为空`,
                        showCancel: false
                    });
                    return;
                }
                if (type === 'memberContactPhone') {
                    this.isRight = this.phoneReg.test(str);
                }

                if (type === 'memberContactDetail' && str.length < 5) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '详细地址不少于5个字哦',
                        showCancel: false
                    });
                }
                // 判断手机号格式是否正确
                if (!this.isRight && str) {
                    this.isRight = false
                    uni.showModal({
                        title: '温馨提示',
                        content: '请输入正确格式的手机号',
                        showCancel: false
                    });
                }

            },
            settingDefault() {
                this.isDefault = !this.isDefault;
            },
            onConfirm(val) {
                this.baseInfo.address = val.checkArr.join(',');
                this.baseInfo.cityArr = val.checkValue.map((val, index)=>{
                    if(index === 0){
                        return val+'0000'
                    } else if(index === 1){
                        return val+'00'
                    } else{
                        return val
                    }
                });
            },
        },
        onLoad(params){
            let { id } = params;
            this.baseInfo.memberContactId = id || '';
            uni.setNavigationBarTitle({
                title: `${this.baseInfo.memberContactId ? '编辑' : '新增'}收货地址`
            });
            if(id){
                this.serviceFun({
                    memberContactId: id
                },'list','GET')
            }
        },
        mounted(){
            uni.$on('editAddress', (item)=>{
                this.baseInfo = {
                    ...this.baseInfo, ...item
                }
            });
        },
        beforeDestoy() {
            uni.$off('editAddress');
        }
    }
</script>

<style scoped lang="scss">
    .address-base-info{
        .base-item{
            display: flex;
            padding: 40rpx 30rpx;
            border-bottom: 1rpx solid #E5E5E5;
            justify-content: space-between;
            color: #333;
            .uni-input{
                text-align: right;
                flex-grow: 1;
            }
            .isDefault{
                color: #999;
            }
            .icon-btn{
                color: #999;
            }
            .common-check-btn{
                margin-right: 30rpx;
            }
        }
    }
</style>